<template>
    <div class="productSpec">
        <add-edit-dialog :params="params" @close="close" @confirm="confirm" v-if="specDialogVisible" />
        <select-spec-group :params="params" @close="close" @confirmSelect="confirmSelect" v-if="isShowselectSpecGroup" />
        <div class="mainSpec">
            <div class="left">
                <select-category @onSelect="onSelect" :params="selectParams" />
            </div>
            <div class="right">
                <div class="butons">
                    <el-button icon="el-icon-plus" @click="addParams"> 添加</el-button>
                    <el-button icon="el-icon-delete" @click="confirmDelete">删除</el-button>
                    <el-button icon="el-icon-delete" @click="relatedGroup">关联分组</el-button>
                    <el-input style="flex:1;margin-left:300px" placeholder="请输入名称搜索" prefix-icon="el-icon-search" v-model="searchKey">
                    </el-input>
                </div>
                <el-skeleton style="width:100%;margin-top:15px;padding: 0px 10px" v-if="!isShowTable" :rows="15" animated />
                <div class="productSpecParamTable" v-if="isShowProductSpecParamTable">
                    <el-table v-if="isShowTable" ref="specParamTable" tooltip-effect="dark" :data="specParamData">
                        <el-table-column type="selection">
                        </el-table-column>
                        <el-table-column min-width="150" prop="groupName" label="参数组名称">
                        </el-table-column>
                        <el-table-column min-width="150" prop="name" label="参数名称">
                        </el-table-column>
                        <el-table-column min-width="150" prop="unit" label="单位">
                        </el-table-column>
                        <el-table-column prop="generic" min-width="150" :formatter="formatterNumberic" label="是否为通用">
                        </el-table-column>
                        <el-table-column prop="searching" min-width="150" :formatter="formatterNumberic" label="是否可搜索">
                        </el-table-column>
                        <el-table-column prop="numberic" min-width="150" label="是否为数字" :formatter="formatterNumberic">
                        </el-table-column>
                        <el-table-column prop="segments" width="200" min-width="150" label="数字参数取值区间">
                        </el-table-column>
                        <el-table-column label="操作" min-width="150">
                            <template slot-scope="scope">
                                <el-button icon="el-icon-edit" @click="updateParams(scope.$index, scope.row)">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[5,10,100, 200, 300, 400]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
    import { Component, Vue, Watch } from 'vue-property-decorator'
    import { namespace } from 'vuex-class'
    import AdminApiActions from '@/components/api/admin-api-actions'
    import AddEditDialog from "./add-update-dialog/add_edit_params_dialog.vue";
    import SelectCategory from './add-update-dialog/select-category.vue';
    import SelectSpecGroup from './add-update-dialog/select-spec-group.vue';

    import $ from "jquery";
    const goodsName = namespace("goods");
    @Component({
        components: {
            AddEditDialog,
            SelectCategory,
            SelectSpecGroup
        },
    })
    export default class ProductSpecParam extends Vue {
        @goodsName.Mutation updateStatus;
        public scope: any = "";
        public total: any = 0;
        public searchKey: any = "";
        public specParamData: Array < any >= new Array < any > ();
        //参数编辑页面弹出框
        public specDialogVisible: boolean = false;
        //显示选择参数组弹出框
        public isShowselectSpecGroup: boolean = false;
        public currentPage: number = 1;
        public pageSize: number = 5;
        public params: any = {};
        public selectParams: any = { isHiddenNext: true }
        public isShowProductSpecParamTable: boolean = true;
        public categoryId: any = "";
        public isShowTable: boolean = false;
        //创建时调用
        async created() {
            this.reloadData();
        }
        public async handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            await this.reloadData();
        }
        public async handleCurrentChange(currentPage) {
            this.currentPage = currentPage;
            await this.reloadData();
        }
        public onSelect(categoryId: any) {
            this.params.categoryId = categoryId;
            this.categoryId = categoryId;
            localStorage.setItem("selectGroup_categoryId", categoryId);
            this.reloadData();
            this.isShowProductSpecParamTable = false;
            this.$nextTick(() => {
                this.isShowProductSpecParamTable = true;
            })
        }
        public async reloadData() {
            this.isShowTable = false;
            let apiActions = new AdminApiActions(this);
            //获取规格参数列表
            let result = await apiActions.getSpecByPage({ cid: this.categoryId ? this.categoryId : localStorage.getItem("selectGroup_categoryId"), name: this.searchKey, pager: { pageSize: this.pageSize, currentPage: this.currentPage } });
            this.specParamData = result.data.rows;
            this.total = result.data.total;
            this.$nextTick(() => {
                $(".el-table th.el-table_1_column_1>.cell").css({ 'padding-left': '14px!important' });
            });
            this.isShowTable = true;
        }
        public updateParams(index, row) {
            this.params.isUpdate = true;
            let sementsArrayStr = row.segments.split(";");
            let sementsArray = new Array < any > ();
            sementsArrayStr.forEach(item => {
                let sementItem = item.split("-")
                sementsArray.push({ from: Number(sementItem[0]), to: Number(sementItem[1]) });
            })
            this.params.form = {
                id: row.id,
                name: row.name,
                numberic: row.numberic,
                generic: row.generic,
                unit: row.unit,
                searching: row.searching,
                segmentsArray: sementsArray
            }
            this.specDialogVisible = true;
        }
        public formatterNumberic(row, column, cellValue, index) {
            if (cellValue) {
                return "是"
            }
            return "否";
        }
        public confirmDelete() {
            let specParamTable: any = this.$refs.specParamTable;
            let selectData: Array < any >= specParamTable.selection;
            if (selectData.length == 0) {
                this.$alert('请选择数据', '提示', {
                    confirmButtonText: '确定'
                });
                return false;
            }
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                await this.deleteParams(selectData);
                this.$message({
                    type: 'success',
                    message: '删除成功!',
                    center: true
                });
            }).catch(() => {});
        }
        public close() {
            this.specDialogVisible = false;
            this.isShowselectSpecGroup = false;
        }
        public async deleteParams(selectData) {
            let apiActions = new AdminApiActions(this);
            let ids: Array < any >= new Array < any > ();
            selectData.forEach(item => {
                ids.push(item.id);
            })
            await apiActions.deleteParams(ids);
            await this.reloadData();
        }
        public async confirm() {
            this.specDialogVisible = false;
            await this.reloadData();
        }
        @Watch("searchKey")
        public async searchByKey(searchText: any) {
            await this.reloadData();
        }
        public addParams() {
            this.params.isUpdate = false;
            this.specDialogVisible = true;
        }
        //关联分组
        public relatedGroup() {
            let specParamTable: any = this.$refs.specParamTable;
            let selectData: Array < any >= specParamTable.selection;
            if (selectData.length == 0) {
                this.$alert('请选择数据', '提示', {
                    confirmButtonText: '确定'
                });
                return false;
            }
            this.isShowselectSpecGroup = true;
        }
        //确定关联
        async confirmSelect(selectRow: any) {
            let apiActions = new AdminApiActions(this);
            let ids: Array < any >= new Array < any > ();
            let specParamTable: any = this.$refs.specParamTable;
            let selectData: Array < any >= specParamTable.selection;
            selectData.forEach(item => {
                ids.push(item.id);
            });
            this.isShowselectSpecGroup = false;
            await apiActions.updateParamsByIds({
                groupId: selectRow.id,
                specParamIds: ids,
                cid: this.categoryId ? this.categoryId : localStorage.getItem("selectGroup_categoryId")
            });
            await this.reloadData();
        }

    }
</script>
<style lang="less">
    .productSpec {
        height: 100%;

        .el-dialog {
            width: 40%;
            margin-top: 0px !important;

            .dialog-footer {
                display: flex;
                justify-content: center;
            }
        }

        .mainSpec {
            display: flex;
            height: calc(100% - 40px);

            .right {
                flex: 1;
                margin-left: 20px;

                .el-table__body-wrapper {
                    overflow-y: auto;
                    height: calc(100% - 70px);
                }

                .has-gutter .el-table-column--selection .cell {
                    padding-left: 14px !important;
                }

                border:soild 1px red;

                .butons {
                    display: flex;
                    flex-direction: row;
                }
            }

            .left {
                .el-table--fit {
                    overflow: auto;
                }

                .has-gutter {
                    display: none;
                }
            }
        }

    }
</style>